<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name=""/>
    <script type="application/x-javascript"> addEventListener("load", function () {
        setTimeout(hideURLbar, 0);
    }, false);

    function hideURLbar() {
        window.scrollTo(0, 1);
    } </script>
    <link href="images/favicon.ico" rel="shortcut icon">
    <link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/popuo-box.css" rel="stylesheet" type="text/css" media="all"/>
    <link href="css/easy-responsive-tabs.css" rel='stylesheet' type='text/css'/>
    <link rel="stylesheet" type="text/css" href="css/zoomslider.css"/>
    <link rel="stylesheet" type="text/css" href="css/style.css"/>
    <link href="css/font-awesome.css" rel="stylesheet">
    <style>
        /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
        ::-webkit-scrollbar {
            width: 4px;
            height: 4px;
            background-color: #F5F5F5;
        }

        /*定义滚动条轨道 内阴影+圆角*/
        ::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
            border-radius: 10px;
            background-color: #F5F5F5;
        }

        /*定义滑块 内阴影+圆角*/
        ::-webkit-scrollbar-thumb {
            border-radius: 10px;
            -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
            background-color: #555;
        }
    </style>
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">
</head>
<body>

<!--===============================视频标题，重新加载，收藏=======================================-->
<div class="w3_breadcrumb">
    <div class="breadcrumb-inner">
        <ul style="text-align: center;">
            <li><span id="title"></span></li>
        </ul>
    </div>
</div>
<!--===============================详情页面=======================================-->
<div class="w3_content_agilleinfo_inner" style="padding: 1em 0;">

    <div class="agile_featured_movies" id="movies">
        <div class="latest-news-agile-info">
            <div class="col-md-8 latest-news-agile-left-content">
                <div style="text-align: right;">
                    <span id="collectOpt" style="margin:0px 10px 15px 0px;"></span>
                    <span id="reload" style="margin:0px 10px 15px 0px;"></span>
                    <span style="margin:0px 10px 15px 0px;" id="videoXz"></span>
                    <span id="downVideo" style="margin:0px 10px 15px 0px;"></span>
                </div>
                <div class="clearfix"></div>
                <div class="single video_agile_player" id="player">

                    <div class="video-grid-single-page-agileits">
                        <div data-video="f2Z65fobH2I" id="video">
                        </div>
                    </div>
                </div>
                <div class="admin-text" id="content" style="font-size: 12px;color: #ffffff;">

                </div>
            </div>
            <div class="col-md-4 latest-news-agile-right-content">

                <div class="agile-info-recent" style="margin: 0 0;">
                    <h7 class="side-t-w3l-agile"><b><span id="author" style="color: cadetblue;"></span></b><span
                            id="authorVideoCount" style="font-size: 12px;color: red;;"></span></h7>
                    <div class="w3ls-recent-grids" id="videoList" style="height: 525px;overflow-y:auto;">
                        <!-------------------------------------------------------------作者相关的视频----------------------------------------->
                    </div>
                </div>

            </div>
            <div class="clearfix"></div>
        </div>

    </div>
</div>
<!--===============================详情页面完成=======================================-->
<script src="js/config.js"></script>
<script type="text/javascript" src="js/modernizr-2.6.2.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/doT.js" type="text/javascript"></script>
<script type="text/javascript" src="ckplayer/ckplayer/ckplayer.js" charset="UTF-8"></script>
<script type="text/javascript" src="js/md5.js"></script>

<script id="videoListTemplate" type="text/x-dot-template">
    {{ for(var index in it.items){ }}
    <div class="w3l-recent-grid" id="grid_{{=it.items[index].id}}" objectId="{{=it.items[index].id}}"
         {{? it.vid== it.items[index].id }}
         style="background-color: #D9EDF7;"
         {{?}}>
        <div class="wom">
            <a onclick="video.playByVideoId('{{=it.items[index].id}}')" href="javascript:void(0);">
                <img src="{{=it.items[index].coverImage}}" class="img-responsive">
            </a>
        </div>
        <div class="wom-right">
            <a onclick="video.playByVideoId('{{=it.items[index].id}}')"
               href="javascript:void(0);"
               style="font-size: 12px;font-family: '微软雅黑';color:#228B22;text-decoration:none;"
               title={{=it.items[index].content}}>{{=it.items[index].title}}</a>
            <div class="clearfix"></div>
            <span style="font-size: 12px;font-family: '微软雅黑';color: brown;">{{=it.items[index].createdAt}}</span>
            <div class="clearfix"></div>
            <a href="javascript:void(0);" style="font-size: 12px;font-family: '微软雅黑';color: brown;"
               onclick="video.collect('{{=it.items[index].id}}')">收藏</a>
            <div class="clearfix"></div>
        </div>
        <div class="clearfix"></div>
    </div>
    {{}}}
</script>


<script>

    var player;

    function scrollIntoViewTo(eId) {
        document.getElementById(eId).scrollIntoView(true);
        return false;
    }

    function openLoginForm() {
        $('#loginForm').modal({backdrop: 'static', keyboard: false});
    }

    var video = {

        authorVideoList: [],

        isfullScreen: false,

        openLoading: function () {
            //$('#loadWaiting').modal({backdrop: 'static', keyboard: false});
        },

        closeLoading: function () {
            //$('#loadWaiting').modal('hide');
        },
        getPathUrlParam: function (name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        },
        collect: function (id) {
            var url = commons.routPath + "/video/" + id + "/collect";
            $.post(url, {}, function (response) {
                if (response.meta.code == '200') {
                    alert("操作成功")
                } else {
                    var message = response.meta.message;
                    if ("unLogin" == message) {
                        openLoginForm();
                    } else {
                        alert(message)
                    }
                }
            });
        },
        /**
         * 播放
         * @param {Object} videoId :视频的id
         */
        play: function (videoId, beforeFn, finishFn) {
            beforeFn();
            var payUrl = commons.routPath + "/video/down/" + videoId;
            var pathUrl = commons.routPath + "/video/paths";
            $.getJSON(payUrl, {}, function (response) {
                finishFn();
                if (response.meta.code == '200') {
                    var strencodeParamter = response.body.down;
                    var htmlVideoSource = strencode(strencodeParamter[0],strencodeParamter[1],strencodeParamter[2]);
                    $.post(pathUrl,{htmlPaths:htmlVideoSource},function (responseData) {
                        if(responseData.meta.code == '200'){
                            $("#reload").attr("videoId", videoId);
                            $("#reload").html("<a href=\"javascript:void(0);\" title=\"重新加载视频\" onclick=\"video.refreshVideo();\"><img src=\"images/party/reload.png\"/></a>");
                            $("#collectOpt").html("<a href=\"javascript:void(0);\" title=\"收藏\" onclick=\"video.collect('" + videoId + "');\"><img src=\"images/party/collect.png\"/></a>");
                            $("#videoXz").html("<a href=\"javascript:void(0);\" title=\"视频旋转\" onclick=\"player.videoRotation(1)\"><img src=\"images/xz.png\"></a>");
                           /* $("#downVideo").html("<a href=\"javascript:void(0);\" title=\"下载视频\" onclick=\"video.download('"+ videoPath +"','" + videoId + "');\"><img src=\"images/party/down.png\"></a>");*/
                            var videoObject = {
                                //“#”代表容器的ID，“.”或“”代表容器的class
                                container: '#video',
                                //该属性必需设置，值等于下面的new chplayer()的对象
                                variable: 'player',
                                //如果强制使用flashplayer则设置成true
                                flashplayer:false,
                                //视频地址
                                video:responseData.body.path,
                                autoplay : true,
                                loop : true,
                                volume: 1
                            };
                            player = new ckplayer(videoObject);
                        }
                    })

                } else {
                    var message = response.meta.message;
                    if ("unLogin" == message) {
                        //打开登录页面
                        openLoginForm();
                    } else {
                        $("#title").html("<b>" + response.meta.message + "</b>");
                    }

                }
            });
        },
        /**
         * 视频下载
         * @param href
         * @param title
         */
        download:function ( href,id ) {
            video.getVideoDetail(id, function (detail) {
               /* const a = document.createElement('a');
                a.setAttribute('href', href);
                a.setAttribute('download', detail.title);
                a.click();*/
                const oReq = new XMLHttpRequest();
                oReq.open('GET', href, true);
                oReq.responseType = 'arraybuffer';
                oReq.withCredentials = true;
                oReq.onload = function () {
                    const arrayBuffer = oReq.response; // Note: not oReq.responseText
                    if (arrayBuffer) {
                        const byteArray = new Uint8Array(arrayBuffer);
                        const aLink = document.createElement('a');
                        const blob = new Blob([byteArray], { type: 'application/mp4' });
                        let fileName = detail.title+'.mp4';

                        aLink.download = fileName;
                        aLink.href = URL.createObjectURL(blob);
                        aLink.target = '_blank';
                        aLink.className="J_notOpenInContainer";
                        document.body.appendChild(aLink);
                        aLink.click();
                    }
                };
                const form = new FormData();
                form.append('_scm_token_', window._scm_token_);
                oReq.send(form);
            });
        },


    findVideoByAuthor: function (author) {
            $.post(commons.routPath + "/video/author", {author: author}, function (videoListResponse) {
                var tmpl = doT.template($("#videoListTemplate").text());
                var currentVid = video.getPathUrlParam("id");
                //把当前的视频放到第一个位置
                var authorVideos = new Array();
                for (var index in videoListResponse.body.items){
                    var vid = videoListResponse.body.items[index].id;
                    if(vid == currentVid){
                        authorVideos[0] = videoListResponse.body.items[index];
                        continue;
                    }else{
                        var leng = authorVideos.length;
                        authorVideos[leng] = videoListResponse.body.items[index];
                    }
                }
                video.authorVideoList = authorVideos;
                $("#authorVideoCount").html("（共" + video.authorVideoList.length + "条视频）");
                $("#videoList").html(tmpl({
                    vid: currentVid,
                    items: authorVideos
                }));
                //设置图片的宽度和高度
                var imgs = $(".img-responsive");
                imgs.width(112);
                imgs.height(112 * 0.75);
            })
        },

        seletedVideo: function (videoId) {
            $(".w3l-recent-grid").each(function () {
                var vid = $(this).attr("objectId");
                if (vid == videoId) {
                    $(this).css("background-color", "#D9EDF7")
                } else {
                    $(this).css("background-color", "")
                }
            });

        },

        getVideoDetail: function (videoId, successFn) {
            var videoDetail = commons.routPath + "/video/" + videoId;
            $.getJSON(videoDetail, {}, function (response) {
                if (response.meta.code == '200') {
                    successFn(response.body.detail)
                }
            });
        },
        init: function () {
            var player = $("#video");
            var widths = player.width();
            var heights = widths * 0.56;
            $("#video").height(heights);
            scrollIntoViewTo("title");
            $("#videoList").hover(function () {
                $("#videoList").css("overflow-y", "auto")
            }, function () {
                $("#videoList").css("overflow-y", "hidden")
            });

        },

        getNextVideoId: function () {
            var videoLength = video.authorVideoList.length;
            if (videoLength <= 1) {
                return null;
            }
            var payVideoId = $("#reload").attr("playId");
            for (var i in video.authorVideoList) {
                var videoId = video.authorVideoList[i].id;
                var nextIndex = Number(i) + 1;
                if (payVideoId == videoId && nextIndex != videoLength) {
                    var nextVideo = video.authorVideoList[nextIndex];
                    return nextVideo.id;
                }
            }
            return null;
        },

        loadPayPage: function () {
            video.init();
            //加载详情
            var videoId = video.getPathUrlParam("id");
            video.getVideoDetail(videoId, function (detail) {
                $("#title").html("<b>" + detail.title + "</b>");
                $("title").html(detail.title);
                $("#content").html(detail.content);
                $("#author").html(detail.author);
                $("#reload").attr("videoId", videoId);
                video.findVideoByAuthor(detail.author);
                video.play(videoId, function () {
                    video.openLoading();
                }, function () {
                    video.closeLoading();
                });

            })

        },

        refreshVideo: function () {
            var videoId = $("#reload").attr("videoId");
            video.play(videoId, function () {
                video.openLoading();
            }, function () {
                video.closeLoading();
            });

        },

        playByVideoId: function (videoId) {
            $("#reload").empty();
            $("#collectOpt").empty();
            $("#videoXz").empty();
            $("#downVideo").empty();
            video.getVideoDetail(videoId, function (detail) {
                $("title").html(detail.title);
                $("#title").html("<b>" + detail.title + "</b>");
                $("#content").html(detail.content);
                $("#author").html(detail.author);
                $("#reload").attr("videoId", videoId);
                video.play(videoId, function () {
                    video.seletedVideo(videoId)
                    video.openLoading();
                }, function () {
                    video.closeLoading();
                });

            })
        },

        screenClick: function (videoId) {
            video.fullScreen(videoId)

        },

        fullScreen: function (videoId) {
            var ele = document.getElementById(videoId)
            if (ele.requestFullscreen) {
                ele.requestFullscreen();
            } else if (ele.mozRequestFullScreen) {
                ele.mozRequestFullScreen();
            } else if (ele.webkitRequestFullScreen) {
                ele.webkitRequestFullScreen();
            }
        },


        transform: function (angle) {
            var player = $(".video_agile_player").first();
            var widths = player.width();
            var heights = widths * 0.6;
            $("#player").css({'transform': 'rotate(' + angle + 'deg)', '-moz-transform': 'rotate(' + angle + 'deg)'});
            $("#videoPlay").height(widths);
            $("#videoPlay").width(heights);
            $("#videoList").width(heights);
        }

    }

    var user = {
        login: function () {
            var loginId = $("#loginId").val();
            var password = $("#password").val();
            //开始登录
            var action = commons.routPath + "/auth/login";
            $.ajax({
                type: "post",
                url: action,
                async: true,
                data: {loginId: loginId, password: password},
                dataType: 'json',
                success: function (response) {
                    if (response.meta.code == '200') {
                        //关闭登录模态框
                        $('#loginForm').modal('hide');
                        user.setUserInfo();
                        video.refreshVideo();
                    }
                }
            });
        }
    }


    $(function () {
        $(".dropdown").hover(
            function () {
                $('.dropdown-menu', this).stop(true, true).slideDown("fast");
                $(this).toggleClass('open');
            },
            function () {
                $('.dropdown-menu', this).stop(true, true).slideUp("fast");
                $(this).toggleClass('open');
            }
        );
        video.loadPayPage();

    });
</script>
<!--=======================================================模态框============================================================================================-->
<div class="modal fade" id="loadWaiting">
    <div class="modal-dialog modal-sm">
        <img alt=""
             src=""/>
    </div>
</div>
<!--登录模态框-->
<div class="modal fade" id="loginForm" tabindex="-1" role="dialog" style="font-size: 12px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4>登录</h4>
                <div class="login-form">
                    <input type="text" name="loginId" id="loginId" placeholder="账号" required>
                    <input type="password" name="password" id="password" placeholder="密码" required>
                    <span style="text-align: center;color: red;" id="loginMessage"></span>
                    <div class="tp">
                        <input type="submit" value="登录" onclick="user.login();">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


</body>
</html>